<template>
    <div>
        <v-layout
                justify-center
                wrap
        >
            <v-flex>
                <v-card>
                    <v-card-title>
                        <el-date-picker
                                v-model="recDateArr"
                                type="datetimerange"
                                :picker-options="pickerOptions"
                                range-separator="至"
                                @change="changeDate"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                align="left">
                        </el-date-picker>
                        <v-spacer></v-spacer>
                        <v-text-field
                                label="报文内容"
                                clearable
                                v-model="telegramText"
                                hint="请输入想搜索的报文内容"
                        ></v-text-field>
                        <v-spacer></v-spacer>
                        <v-text-field
                                label="唯一标识"
                                clearable
                                v-model="telegramGuid"
                                hint="请输入完整的GUID"
                        ></v-text-field>
                    </v-card-title>

                    <v-toolbar flat color="white">
                        <v-toolbar-title>有效电报列表</v-toolbar-title>

                        <v-spacer></v-spacer>
                        <v-btn class="mx-2"
                               dark
                               @click="initTelegrams(current,pageSize)"
                               color="green darken-1">
                            <v-icon left>mdi-search</v-icon>
                            查询
                        </v-btn>
                        <v-btn class="mx-2"
                               dark
                               @click="resetParam()"
                               color="red darken-1">
                            <v-icon left>mdi-search</v-icon>
                            重置
                        </v-btn>
                        <v-btn color="primary" dark @click="expand = !expand">
                            {{ expand ? '手动折叠' : '自动折叠' }}
                        </v-btn>
                    </v-toolbar>

                    <v-data-table
                            :headers="headers"
                            :items="telegrams"
                            item-key="id"
                            loading-text="Loading... Please wait"
                            :expand="expand"
                            :hide-actions="hideActions"
                            :disable-initial-sort="true"
                    >
                        <v-progress-linear
                                :active="loading"
                                :indeterminate="loading"
                                absolute
                                bottom
                                color="deep-purple accent-4"
                        ></v-progress-linear>

                        <template v-slot:items="props">
                            <tr @click="props.expanded = !props.expanded">
                                <td class="text-xs-center">
                                    <v-chip
                                            class="ma-2"
                                            color="green darken-1"
                                            label
                                            text-color="white"
                                    >
                                        {{ props.item.id }}
                                    </v-chip>
                                </td>
                                <td class="text-xs-center">{{ props.item.recDate | unixformat }}</td>
                                <td class="text-xs-center">{{ props.item.daStartTime | unixformat }}</td>
                                <td class="text-xs-center">{{ props.item.daEndTime | unixformat }}</td>
                                <td class="text-xs-center">{{ props.item.priority }}</td>
                                <td class="text-xs-center">{{ props.item.guid }}</td>
                                <td class="text-xs-center">{{ props.item.origin }}</td>
                                <td class="text-xs-center">{{ props.item.destination }}</td>
                                <td class="text-xs-center">{{ props.item.createTime | unixformat }}</td>
                                <td class="text-xs-center">
                                    <v-btn small outline color="green darken-1"
                                           @click.stop="showOriginData(props.item.sourceId,props.item.text)">
                                        原始数据包
                                    </v-btn>
                                </td>
                            </tr>
                        </template>

                        <!--扩展内容-->
                        <template v-slot:expand="props">
                            <v-card flat>
                                <v-card-text>
                                    <pre v-html="props.item.text"/>
                                </v-card-text>
                            </v-card>
                        </template>

                        <template v-slot:no-results>
                            <v-alert :value="true" color="error" icon="warning">
                                Your search for "{{ search }}" found no results.
                            </v-alert>
                        </template>
                    </v-data-table>
                    <v-pagination
                            v-model="current"
                            :length="size"
                            :total-visible="7"
                            @input="initTelegrams(current,pageSize)"
                            circle
                    >
                    </v-pagination>
                </v-card>
            </v-flex>
        </v-layout>

        <!--原始数据包 详情 dialog-->
        <v-dialog v-model="originDialog" width="600px">
            <v-card>
                <v-card-title>
                    <span class="headline">数据包原文</span>
                </v-card-title>
                <v-card-text>
                    <pre v-html="originData">
                    </pre>
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="green darken-1" outline small @click="originDialog = false">关闭</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </div>
</template>

<script>
    export default {
        name: "readNormalList",
        data() {
            return {
                //搜索项
                recDateArr: "",
                telegramText: "",
                telegramGuid: "",
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }],
                },
                //结束
                expand: false,
                date: new Date().toISOString().substr(0, 10),
                dateFormatted: "",
                headers: [
                    {text: '数据ID', align: 'center', value: 'id'},
                    {text: '接收时间', align: 'center', value: 'recDate'},
                    {text: '解析开始时间', align: 'center', value: 'daStartTime'},
                    {text: '解析结束时间', align: 'center', value: 'daEndTime'},
                    {text: '电报等级', align: 'center', value: 'priority'},
                    {text: '唯一标识', align: 'center', value: 'guid'},
                    {text: '收电地址', align: 'center', value: 'origin'},
                    {text: '发电地址', align: 'center', value: 'destination'},
                    {text: '创建时间', align: 'center', value: 'createTime'},
                    {text: '原始数据包', align: 'center', value: 'sourceId'},
                ],
                telegrams: [],
                loading: false,
                hideActions: true,
                current: 1,//初始时是第几页
                pageSize: 10,//一页需要展示多少条博客
                size: 0,//当前总共有多少页，根据后台回传的参数计算
                total: 0,//当前数据总数
                originDialog: false,//原始数据包弹窗
                originData: '',//原始数据包 详情
            }
        },
        methods: {
            changeDate(arr) {
                console.log("选中的时间范围是：" + arr)
            },
            resetParam() {
                this.recDateArr = [];
                this.telegramText = "";
                this.telegramGuid = "";
            },
            /**
             * 加载电报列表
             * */
            initTelegrams(current, pageSize) {
                let that = this;
                that.loading = true;
                this.$http.post('/api/read/list', this.$qs.stringify({
                    current: current,
                    pageSize: pageSize,
                    recDateStart: this.recDateArr.length > 1 ? this.recDateArr[0] : "",
                    recDateEnd: this.recDateArr.length > 1 ? this.recDateArr[1] : "",
                    text: this.telegramText,
                    guid: this.telegramGuid,
                })).then(res => {
                    that.loading = false;
                    let resultData = res.data;
                    if (resultData && resultData.code === 200) {
                        let data = resultData.data;
                        this.telegrams = [];
                        this.telegrams.push(...data.records);
                        this.size = Math.ceil(data.total / this.pageSize)
                    }
                })
            },

            /**
             * 查看原始数据包
             * @param sourceId
             * @param content
             */
            showOriginData(sourceId, content) {
                this.$http.post('/api/read/getOriginBySId', this.$qs.stringify({
                    sourceId: sourceId
                })).then(res => {
                    let resultData = res.data;
                    if (resultData && resultData.code === 200) {
                        this.originDialog = true;
                        let data = resultData.data;
                        this.originData = "";
                        //将自身报文变色标识
                        this.originData = data.replace(content, '<span class="success-data">' + content + '</span>');
                    }
                })

            },
            pageChanged() {
                console.log("页面变更了")
            }
        },
        mounted() {
            //初始化列表
            this.initTelegrams(this.current, this.pageSize)
        }
    }
</script>
